<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <script src="../../js/load.js"></script>
    <style>
        .layui-card-header{
            background-color: #eee !important;
        }
        .layui-card{
            border: 1px solid #eee !important;
        }
        .opbody{
            display: flex;
            flex-direction: column;
        }
        .optitle{
            width: 100px;
            text-align: center;
        }
        .optitle{
            width: 100px;
            text-align: center;
        }
        .oprow{
            display:flex;
            flex-direction: row;
            min-height: 40px;
            align-items: center;
        }
        .optext{
            word-break:break-all;
            white-space:pre-wrap;
            width: 200px;
        }

        .main{
            width:calc(100% - 30px);
            position: relative;
            margin: 0 auto;
            padding: 0 15px;
        }

        .text-auto{
          display: block;
          word-break: keep-all;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          -o-text-overflow: ellipsis;
          -icab-text-overflow: ellipsis;
          -khtml-text-overflow: ellipsis;
          -moz-text-overflow: ellipsis;
          -webkit-text-overflow: ellipsis;
        }
    </style>
</head>
<body>
<div class="main">
    <div class="flexrow">
        <div class="layui-panel list-container">
            <div class="list-search-container" style="margin-left: 15px">
                <button class="layui-btn layui-btn-sm" onclick="HandleAdd()"><i
                        class="layui-icon layui-icon-add-1 layui-font-12"></i>新增项目
                </button>
                <div class="list-search-item">
                    <span style="width:70px">项目名称：</span>
                    <input id="projectName" autocomplete="off" class="layui-input"  style="width:200px">
                    <span style="width:70px;margin-left:10px">项目分类：</span>
                    <div id="groupGuid"  style="width:200px;margin-right:10px">

                    </div>
                    <span style="width:70px;margin-left:10px">项目状态：</span>
                    <div class="layui-form">
                        <select id="projectStatus" name="projectStatus"  style="width:200px" lay-verify="">
                            <option value="" selected>全部</option>
                            <option value="未上传">未上传</option>
                            <option value="未安装">未安装</option>
                            <option value="已停止">已停止</option>
                            <option value="运行中">运行中</option>
                        </select>
                    </div>
                </div>
                <button class="layui-btn layui-btn-sm" style="margin-left:5px" onclick="BindTableData()"><i
                        class="layui-icon layui-icon-search layui-font-12"></i>搜索
                </button>
                <button class="layui-btn layui-btn-sm" onclick="HandleGroup()"><i class="layui-icon layui-icon-set-fill layui-font-12"></i>分类配置</button>
            </div>
            <div style="display: flex;flex-direction: row;width: 100%;flex-wrap: wrap" id="view">


            </div>
        </div>
    </div>
</div>
</body>
</html>
<style>
    .noupload {
        color: #393D49;
    }

    .noinstall {
        color: #FFB800;
    }

    .stop {
        color: #FF5722;
    }

    .running {
        color: #5FB878;
    }

</style>
<script>
    var current_ip = window.location.hostname;
</script>
<script type="text/html" id="project">
    {{#  layui.each(d.obj, function(index, item){ }}
    <div class="layui-card" style="width: 380px;min-height: 550px;margin: 10px">
        <div class="layui-card-header" style="display: flex;align-items: center;justify-content: space-between">
            <span class="text-auto" title="{{item.projectName}}">{{item.projectName}}</span>
            <div style="display:flex;flex-direction:row;align-items: center;margin-left:10px">
                {{# if (item.configFileCount>0) { }}
                <button class="layui-btn layui-btn-danger layui-btn-sm" onclick="HandleConfig('{{item.projectID}}')"><i class="layui-icon layui-icon-set-fill layui-font-12"></i>配置文件</button>
                {{# } }}
                {{# if (item.configFileCount==0) { }}
                <button class="layui-btn layui-btn-sm" onclick="HandleConfig('{{item.projectID}}')"><i class="layui-icon layui-icon-set-fill layui-font-12"></i>配置文件</button>
                {{# } }}
                {{# if (item.commandCount>0) { }}
                <button class="layui-btn layui-btn-danger layui-btn-sm" onclick="HandleCommand('{{item.projectID}}')"><i class="layui-icon layui-icon-set-fill layui-font-12"></i>项目脚本</button>
                {{# } }}
                {{# if (item.commandCount==0) { }}
                <button class="layui-btn layui-btn-sm" onclick="HandleCommand('{{item.projectID}}')"><i class="layui-icon layui-icon-set-fill layui-font-12"></i>项目脚本</button>
                {{# } }}
            </div>
        </div>
        <div class="layui-card-body">
            <div class="opbody">
                <div class="oprow">
                    <span class="optitle">服务名称：</span>
                    <div class="opcontent">
                        {{item.serviceName}}
                    </div>
                </div>
                <div class="oprow">
                    <span class="optitle">  部署端口：</span>
                    <div class="opcontent">
                        {{item.warPort}}
                    </div>
                </div>
                {{# if (item.warPort!="") { }}
                <div class="oprow">
                    <span class="optitle">服务地址：</span>
                    <div class="opcontent">
                        <a href="http://{{current_ip}}:{{item.warPort}}{{item.contextPath}}" target="_blank" style="color: blue; text-decoration: underline;">{{current_ip}}:{{item.warPort}}{{item.contextPath}}</a>
                    </div>
                </div>
                {{# } }}
                <div class="oprow">
                    <span class="optitle">  服务依赖：</span>
                    <div class="opcontent">
                        {{# if (item.dependService) { }}
                        {{# layui.each(item.dependService.split("|"), function(index, service){ }}
                        <span class="layui-badge layui-bg-green">{{service}}</span>
                        {{# }); }}
                        {{# } }}
                    </div>
                </div>
                <div class="oprow">
                    <span class="optitle">映射路由：</span>
                    <div class="optext">
                        {{item.contextPath}}
                    </div>
                </div>
                <div class="oprow">
                    <span class="optitle">初始内存：</span>
                    <div class="optext">
                        {{item.initMemorySize}}MB
                    </div>
                </div>
                <div class="oprow">
                    <span class="optitle">最大内存：</span>
                    <div class="optext">
                        {{item.maxMemorySize}}MB
                    </div>
                </div>
                <div class="oprow">
                    <span class="optitle">扫描跳过：</span>
                    <div class="optext">
                        {{item.skipScan}}
                    </div>
                </div>
                <div class="oprow">
                    <span class="optitle">创建时间：</span>
                    <div class="opcontent">
                        {{item.createDate}}
                    </div>
                </div>
                <div class="oprow">
                    <span class="optitle">部署时间：</span>
                    <div class="opcontent">
                        {{item.lastDepolyDate}}
                    </div>
                </div>
                <div class="oprow">
                    <span class="optitle">项目状态：</span>
                    <div class="opcontent">
                        {{# if (item.projectStatus=='未上传') { }}
                        <span class='noupload'>{{item.projectStatus}}</span>
                        {{# } else if(item.projectStatus=='未安装') { }}
                        <span class='noinstall'>{{item.projectStatus}}</span>
                        {{# } else if(item.projectStatus=='已停止') { }}
                        <span class='stop'>{{item.projectStatus}}</span>
                        {{# } else { }}
                        <span class='running'>{{item.projectStatus}}</span>
                        {{# } }}
                    </div>
                </div>
                <div class="oprow">
                    <span class="optitle">部署操作：</span>
                    <div class="opcontent">
                        <input type="file" name="file" id="file" style="display:none" accept=".war"
                               onchange="HandleRealUpload()"/>

                        {{# if (item.projectStatus=='未上传') { }}
                        <button class="layui-btn layui-btn-sm" onclick="HandleUpload('{{item.projectID}}')"><i
                                class="layui-icon layui-icon-upload-circle layui-font-12"></i>上传
                        </button>
                        {{# } else if(item.projectStatus=='未安装') { }}
                        <button class="layui-btn layui-btn-sm" onclick="HandleUpload('{{item.projectID}}')"><i
                                class="layui-icon layui-icon-upload-circle layui-font-12"></i>上传
                        </button>
                        <button class="layui-btn layui-btn-sm" onclick="HandleInstall('{{item.projectID}}')"><i
                                class="layui-icon layui-icon-set layui-font-12"></i>安装
                        </button>
                        {{# } else if(item.projectStatus=='已停止') { }}
                        <button class="layui-btn layui-btn-sm layui-btn-danger"
                                onclick="HandleUnInstall('{{item.projectID}}')"><i
                                class="layui-icon layui-icon-logout layui-font-12"></i>卸载
                        </button>
                        <button class="layui-btn layui-btn-sm" onclick="HandleUpload('{{item.projectID}}')"><i
                                class="layui-icon layui-icon-upload-circle layui-font-12"></i>上传
                        </button>
                        <button class="layui-btn layui-btn-sm" onclick="HandleStart('{{item.projectID}}')"><i
                                class="layui-icon layui-icon-play layui-font-12"></i>启动
                        </button>
                        {{# } else if(item.projectStatus=='启动中' || item.projectStatus=='停止中') { }}
                        <span></span>
                        {{# } else { }}
                        <button class="layui-btn layui-btn-sm layui-btn-danger"
                                onclick="HandleStop('{{item.projectID}}')"><i
                                class="layui-icon layui-icon-pause layui-font-12"></i>停止
                        </button>
                        {{# } }}
                    </div>
                </div>
                <div class="oprow">
                    <span class="optitle"> 运维操作：</span>
                    <div class="opcontent">
                        {{# if (item.lastDepolyDate) { }}
                        <button class="layui-btn layui-btn-sm" onclick="HandleShowLog('{{item.projectID}}')"><i class="layui-icon layui-icon-search layui-font-12"></i>日志</button>
                        {{# } }}
                        <button class="layui-btn layui-btn-sm" onclick="HandleFileManage('{{item.projectID}}')"><i class="layui-icon layui-icon-search layui-font-12"></i>文件管理</button>
                    </div>
                </div>
                <div class="oprow">
                    <span class="optitle"> 版本操作：</span>
                    <div class="opcontent">
                        {{# if (item.projectStatus=='未安装' || item.projectStatus=='已停止') { }}
                        <button class="layui-btn layui-btn-sm" onclick="HandleVersion('{{item.projectID}}')"><i class="layui-icon layui-icon-upload-circle layui-font-12"></i>版本管理</button>
                        <button class="layui-btn layui-btn-sm" onclick="HandleBackUp('{{item.projectID}}')"><i class="layui-icon layui-icon-prev layui-font-12"></i>还原备份</button>
                        {{# } }}
                    </div>
                </div>
                <div class="oprow">
                    <span class="optitle"> 信息操作：</span>
                    <div class="opcontent">
                        {{# if (item.projectStatus=='未上传' || item.projectStatus=='未安装') { }}
                        <button class="layui-btn layui-btn-sm" onclick="HandleEdit('{{item.projectID}}')"><i
                                class="layui-icon layui-icon-edit layui-font-12"></i>编辑
                        </button>
                        <button class="layui-btn layui-btn-sm layui-btn-danger"
                                onclick="HandleDelete('{{item.projectID}}')"><i
                                class="layui-icon layui-icon-delete layui-font-12"></i>删除
                        </button>
                        {{# } }}
                        {{# if (item.projectStatus!='未上传' && item.projectStatus!='未安装') { }}
                        <button class="layui-btn layui-btn-sm" onclick="HandleEditInfo('{{item.projectID}}')"><i
                                class="layui-icon layui-icon-edit layui-font-12"></i>编辑
                        </button>
                        {{# } }}
                    </div>
                </div>
                <div class="oprow">
                    <span class="optitle">部署备注：</span>
                    <div class="optext">
                        {{item.depolyRemark}}
                    </div>
                </div>
                <div class="oprow">
                    <span class="optitle">JDK路径：</span>
                    <div class="optext">
                        {{item.javaHome}}
                    </div>
                </div>
                <div class="oprow">
                    <span class="optitle">  所属分类：</span>
                    <div class="opcontent">
                        {{# if (item.groupName) { }}
                        {{#  layui.each(item.groupName.split("|"), function(index, item){ }}
                        <span class="layui-badge layui-bg-green">{{item}}</span>
                        {{#  }); }}
                        {{# } }}
                    </div>
                </div>
                <div class="oprow">
                    <span class="optitle">排序：</span>
                    <div class="optext">
                        {{item.sortNum}}
                    </div>
                </div>
            </div>
        </div>
    </div>
    {{#  }); }}
</script>
<script>
    var groupGuid = null;
    var projectID = "";
    $(function () {
        layui.use('laytpl', function() {})
        initGroup();
    })

    function BindTableData() {
        var groupList = groupGuid.getValue('value');
        var laytpl = layui.laytpl;
        var param = {
            projectName: $("#projectName").val(),
            groupGuid: groupList.join("|"),
            projectStatus: $('#projectStatus').val()
        }
        HttpPost(JSON.stringify(param), 'api/war/list', function (result) {
            if (result.code == 0) {
                var data = result.data;
                var getTpl = project.innerHTML
                var view = document.getElementById('view');
                laytpl(getTpl).render(data, function(html){
                    view.innerHTML = html;
                });
            } else {
                OpenFail(result.msg);
            }
        })

    }

    function HandleAdd() {
        OpenDialog('新增项目', 'pages/war/war_add.html', 800, 850, function () {
            BindTableData();
        })
    }

    function HandleEdit(RowData) {
        OpenDialog('修改项目', 'pages/war/war_edit.html?projectID=' + RowData, 800, 850, function () {
            BindTableData();
        })
    }

    function HandleEditInfo(RowData) {
        OpenDialog('修改项目信息', 'pages/war/war_editinfo.html?projectID=' + RowData, 600, 500, function () {
            BindTableData();
        })
    }

    function HandleDelete(RowData) {
        OpenConfirm('确认删除？', function () {
            var param = {
                projectID: RowData
            }
            HttpPost(JSON.stringify(param), 'api/war/delete', function (result) {
                if (result.code == 0) {
                    OpenSuccessMessage("删除成功")
                    BindTableData();
                } else {
                    OpenFail(result.msg);
                }
            })
        })
    }

    function HandleUpload(RowData) {
        projectID = RowData;
        if(checkLock()){
           OpenFail("另一个程序正在使用war包，进程无法访问");
           return;
        }
        $("#file").click();
    }

    function HandleRealUpload() {
        var file = document.getElementById("file").files[0];
        var filesize = file.size;
        var filename = file.name;
        var chunkSize = 5 * 1024 * 1024
        var chunkCount = Math.ceil(filesize / chunkSize);
        var worker = new Worker('../../js/worker.js');
        var param = {
            projectID: projectID,
            filename: filename,
            filesize:filesize,
            chunkCount: chunkCount,
            chunkSize:chunkSize,
            file: file,
            uploadUrl: GetRootPath() + "api/depoly/upload"
        }

        var element = layui.element;
        var progressLayer = layer.open({
            type: 0,
            title: false,
            closeBtn: 0,
            btn: false,
            content: '<div class="layui-progress layui-progress-big" lay-filter="progress" lay-showpercent="true"><div class="layui-progress-bar" lay-percent="0%"></div></div>'
        });


        worker.onmessage = function (event) {
            var workresult = event.data;
            if (workresult.code == 0) {
                var percent = workresult.percent;
                element.progress('progress', percent + '%')
                if (workresult.percent == 100) {
                    layer.close(progressLayer);
                    layer.closeAll();
                    worker.terminate();
                    BindTableData();
                    OpenSuccessMessage("上传成功");
                }
            } else {
                layer.close(progressLayer);
                layer.closeAll();
                worker.terminate();
                OpenFail("上传失败");
            }

        }
        worker.postMessage(param);
    }

    function HandleInstall(RowData) {
        var param = {
            projectID: RowData
        }
        var loading = layer.load('安装中...', {
            icon: 16,
            shade: 0.01
        })
        HttpPost(JSON.stringify(param), 'api/depoly/install', function (result) {
            layer.close(loading);
            if (result.code == 0) {
                OpenSuccessMessage("安装成功")
                BindTableData();
            } else {
                OpenFail(result.msg);
            }
        })
    }

    function HandleUnInstall(RowData) {
        var param = {
            projectID: RowData
        }
        var loading = layer.load('卸载中...', {
            icon: 16,
            shade: 0.01
        })
        HttpPost(JSON.stringify(param), 'api/depoly/uninstall', function (result) {
            layer.close(loading);
            if (result.code == 0) {
                OpenSuccessMessage("卸载成功")
                BindTableData();
            } else {
                OpenFail(result.msg);
            }
        })
    }

    function HandleStart(RowData) {
        var param = {
            projectID: RowData
        }
        var loading = layer.load('启动中...', {
            icon: 16,
            shade: 0.01
        })
        HttpPost(JSON.stringify(param), 'api/depoly/start', function (result) {
            layer.close(loading);
            if (result.code == 0) {
                OpenSuccessMessage("启动成功");
                HandleShowLog(RowData)
                BindTableData();
            } else {
                OpenFail(result.msg);
            }
        })
    }

    function HandleStop(RowData) {
        var param = {
            projectID: RowData
        }
        var loading = layer.load('停止中...', {
            icon: 16,
            shade: 0.01
        })
        HttpPost(JSON.stringify(param), 'api/depoly/stop', function (result) {
            layer.close(loading);
            if (result.code == 0) {
                OpenSuccessMessage("停止成功")
                BindTableData();
            } else {
                OpenFail(result.msg);
            }
        })
    }

    function HandleShowLog(RowData) {
        OpenDialog('运行日志', 'pages/depoly/depoly_log.html?projectID=' + RowData, 1366, 768, function () {

        })
    }

    function HandleVersion(RowData) {
        OpenDialog('版本管理', 'pages/depolyversion/version_list.html?projectID=' + RowData, 1200, 800, function () {

        })
    }

    function HandleBackUp(RowData) {
        OpenDialog('还原备份', 'pages/depoly/depoly_recover.html?projectID=' + RowData, 800, 400, function () {

        })
    }

    function HandleConfig(RowData) {
        OpenDialog('配置文件管理', 'pages/config/config_list.html?projectID=' + RowData, 1200, 800, function () {

        })
    }

   function HandleCommand(RowData) {
        OpenDialog('项目脚本管理', 'pages/command/command_list.html?projectID=' + RowData, 1200, 800, function () {

        })
    }

    function HandleGroup(){
        OpenDialog('分类配置', 'pages/group/group_list.html', 800, 600, function () {

        })
    }

    function initGroup() {
        var param = {
        }
        HttpPost(JSON.stringify(param), 'api/group/list', function (result) {
            if (result.code == 0) {
                var groupList = result.data.obj;
                var data = [];
                for (var i=0;i<groupList.length;i++){
                    data.push(   {name: groupList[i].groupName, value: groupList[i].groupID})
                }
                groupGuid = xmSelect.render({
                    el: '#groupGuid',
                    filterable: true,
                    data: data
                })
                BindTableData();
            }
        })
    }

    function checkLock(){
        var lock = false;
        var param = {
            projectID: projectID
        }
        HttpPost_Sync(JSON.stringify(param), 'api/depoly/checkLock', function (result) {
            if (result.code == -1) {
               lock = true;
            }
        })
        return lock;
    }

    function HandleFileManage(RowData){
        OpenDialog('项目文件', 'pages/pfmanage/pfmanage_list.html?projectID=' + RowData, 1200, 800, function () {

        })
    }
</script>